<div class="framework-box">
    <div class="billing-module">
        <div class="module-title">安全组</div>
        <div class="module-content" style="flex-grow:1">

            <table class="table table-striped">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>描述</th>
                    <th>选择</th>
                </tr>
                </thead>
                <tbody>
                {% for group in groups_list %}
                    <tr id="tb_title">
                        <td >
                            <div>
                                <img src="{{ STATIC_URL }}ratingfunction/img/down.png" alt="" id="img_down">
                                <span>{{ group.name }}</span>
                            </div>
                        </td>
                        <td>{{ group.description }}</td>
                        <td><input type="radio" required  name="security_group_id" id="group"
                                   value="{{ group.id }}"></td>
                    </tr>
                    <table class="table table-striped" id="tb-hide" style="display: none">
                        <thead>
                        <tr>
                            <th>直连</th>
                            <th>以太网类型</th>
                            <th>协议</th>
                            <th>最小端口</th>
                            <th>最大端口</th>
                            <th>远程</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for security in group.security_group_rules %}
                            <tr>
                                <input name="id" type="hidden" value="{{ security.security_group_id }}">
                                <td>{{ security.direction }}</td>
                                <td>{{ security.ethertype }}</td>
                                {% if security.protocol == None %}
                                    <td>-</td>
                                {% else %}
                                    <td>{{ security.protocol }}</td>
                                {% endif %}
                                {% if security.port_range_min == None %}
                                    <td>-</td>
                                {% else %}
                                    <td>{{ security.port_range_min }}</td>
                                {% endif %}
                                {% if security.port_range_max == None %}
                                    <td>-</td>
                                {% else %}
                                    <td>{{ security.port_range_max }}</td>
                                {% endif %}

                                {% if security.remote_ip_prefix == None %}
                                    <td>-</td>
                                {% else %}
                                    <td> {{ security.remote_ip_prefix }}</td>

                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% endfor %}
                </tbody>
            </table>

        </div>

    </div>
</div>

<script>
    $("#tb_title").click(function () {
        $("#tb-hide").toggle();
        if ($("#tb-hide").is(':hidden')) {
            $("#img_down").attr("src", "{{ STATIC_URL }}ratingfunction/img/down.png")
        } else {
            $("#img_down").attr("src", "{{ STATIC_URL }}ratingfunction/img/up.png")
        }
    });
</script>